<link rel="stylesheet" href="{{URL::asset('./css/index.css')}}">

@extends('home.layout.base')

@section('content')
<div class="main" >
    <div id="app" v-cloak>
        <div class="navigation">
            <div class="navigation_content">
                <div class="navigation_supplier">
                    <img src="{{URL::asset('./img/index/menu.png')}}">
                    <span>供应商分类</span>
                </div>
                <div class="navigation_supplierList">
                    <span class="active"><a href="{{route('home.index.index') }}">首页</a></span>
                    <span><a href="{{route('home.store.storeList') }}">供应商</a></span>
                    <span><a href="{{route('home.activity.actCate') }}"> 活动/会议/培训</a></span>
                    <span><a href="{{route('home.goods.goodsCate') }}">商品</a></span>
                    <span><a href="{{route('home.word.wordCate') }}">文档下载</a></span>
                    <span><a href="{{route('home.demand.demandList') }}">需求市场</a></span>
                    <span><a href="{{route('home.news.news') }}">新闻资讯
                        </a></span>
                    <!-- <span v-for="item in tabData" :key="item.id"><a :href="item.link"> @{{item.title}}</a></span> -->
                </div>
            </div>
        </div>
        <div class="app">
            <div class="swiperLIst">
                <div class="listMenu" @mouseleave="hideDetail()">
                    <p v-for="(items,index) in listMenu" @mouseenter="childDetail(items)" @click="window.location.href = '{{ route('home.store.storeList') }}?cid='+items.id">
                        <img :src="items.before_icon" alt="">
                        <span>@{{items.name}}</span>
                    </p>
                    <div class="listMenu_child">
                        <div class="listMenu_child_left">
                            <div class="child_left">
                                <span>
                                    <i></i>
                                </span>
                                <span class="child_left_cont">
                                    <header>@{{listMenuTitle.name}}</header>
                                    <div>
                                        <span v-for="item in listMenuChild" @click="window.location.href = '{{ route('home.store.storeList') }}?cid='+listMenuTitle.id+'&cid_id='+item.id">@{{item.name}}</span>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <div class="listMenu_child_right">
                            <div class="childTitle">
                                <div>推荐商家</div>
                                <span v-if="listMenuChildStore.current_page>5">
                                    <img src="{{URL::asset('./img/index/childTitleLeft.png')}}" />
                                    <img src="{{URL::asset('./img/index/childTitleRight.png')}}" />
                                </span>
                            </div>
                            <div class="childAdvCont">
                                <div v-for="item in listMenuChildStore.data" @click="window.location.href = '{{ route('home.store.store') }}?id='+item.id">
                                    <img :src="item.logo" alt="">
                                    <span>
                                        <span>@{{item.store_name}}</span>
                                        <span>成交了 <a>@{{item.service}}</a> 个服务</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiperAni">
                    <div style="width:100%;height:100%;position:relative;">
                        <!-- <div id="swiperAni" class="carousel slide" data-ride="carousel" data-interval="5000"> -->
                        <div id="swiperAni" class="carousel slide" data-interval="5000">
                            <!-- Indicators -->
                            <!-- <ol class="carousel-indicators">
                            <li data-target="#swiperAni" data-slide-to="0" class="active"></li>
                            <li data-target="#swiperAni" data-slide-to="1"></li>
                            <li data-target="#swiperAni" data-slide-to="2"></li>
                            </ol> -->
                            <!-- Wrapper for slides -->
                            <!-- <div class="item" :class="{active:index==0}" v-for="(item,index) in swiperData">
                                    <a :href="item.link">
                                    <img :src="item.thumb" alt="..."></a>
                                </div> -->
                            <div class="carousel-inner">
                                <div class="item" :class="{active:index==0}" v-for="(item,index) in swiperData">
                                    <a :href="item.link">
                                        <img :src="item.thumb" alt="..."></a>
                                </div>
                            </div>
                        </div>
                        <div class="swiperAni_footer">
                            <div class="swiperAni_footer-content">
                                <span class="fabu">快速发布需求，<span class="fabu" style="color:#FFE431">快速匹配供应商</span>，轻松挑选满意方案！</span>
                                <button class="free_button" @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布</button>
                                <div class="fabu_QRcode">
                                    <div>
                                        <el-popover placement="top" trigger="hover">
                                            <div class="QR_mess_detail">
                                                <p>扫码进入微信公众号</p>
                                                <p class="QR_mess_detail_2">随时随地发布需求</p>
                                                <img src="{{URL::asset('./img/index/QRcode_2.png')}}">
                                            </div>
                                            <span slot="reference">
                                                <img src="{{URL::asset('./img/index/QRcode_1.png')}}">
                                            </span>
                                        </el-popover>
                                    </div>
                                    <div class="QR_mess">
                                        <a>
                                            <p class="QR_mess_title">进入公众号</p>
                                            <p class="QR_mess_content">随时随地</p>
                                            <p class="QR_mess_content">发布需求</p>
                                        </a>
                                    </div>
                                </div>
                                <span class="swiperAni_guanbi" @click="swiperFooterClose">X</span>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="list_hot">
                    <div class="list_hotTop">
                        <el-card class="box-card list_hotTop-card" shadow="never">
                            <div slot="header" class="clearfix">
                                <img src="{{asset('./img/index/hot.png')}}">
                                <span class="list_hotTop-cardTitle">热门活动</span>
                                <span class="list_hotTop-cardMore" @click="window.location.href = '{{ route('home.activity.actList') }}'">
                                    MORE +
                                </span>
                            </div>
                            <p class="list_hotTop_cont" v-for="item in hotact" @click=" window.location.href = '{{ route('home.activity.actDetails') }}?cateId='+item.id">
                                <img src="{{asset('./img/index/xingxing.png')}}" alt="">
                                <span>@{{item.title}}</span>
                            </p>
                        </el-card>
                    </div>
                    <div class="list_hotbottom">
                        <el-card class="box-card list_hotTop-card" shadow="never">
                            <div slot="header" class="clearfix tabPan">
                                <div :class="hotTitle=='热销商品'?'active':''" @click="hot('热销商品')">
                                    <img src="{{asset('./img/index/sellLikeActive.png')}}">
                                    <span class="list_hotTop-cardTitle">热销商品</span>
                                </div>
                                <div :class="hotTitle=='成交记录'?'active':''" @click="hot('成交记录')">
                                    <img src="{{asset('./img/index/makeActive.png')}}">
                                    <span class="list_hotTop-cardTitle">成交记录</span>
                                </div>
                            </div>
                            <div v-if="hotTitle=='成交记录'">
                                <p class="list_hotTop_cont" v-for="item in transaction">
                                    <img src="{{asset('./img/index/laba.png')}}" alt="">
                                    <span>@{{item.title}}</span>
                                </p>
                            </div>
                            <div v-else class="sellLikeCont">
                                <div v-for="item in hotgoods" @click=" window.location.href = '{{ route('home.goods.goodsDetails') }}?goodsId='+item.id">
                                    <img :src="item.thumb">
                                    <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                                        <span>@{{item.title}}</span>
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>

            <div class="content_center">
                <div class="content_floor">
                    <div class="floor_details" v-for="(item,index) in climbs" :id="'fllo_'+index">
                        <div class="floor_header">
                            <div class="floor_header_left">
                                <img :src="item.before_icon" alt="" class="floor_icon">
                                <span class="floor_title">
                                    @{{index+1}}F @{{item.name}}
                                    <p>@{{item.english_name}}</p>
                                </span>
                            </div>
                            <span class="floor_mores" @click="window.location.href = '{{ route('home.store.storeList') }}?cid='+item.id">MORE+</span>
                        </div>
                        <div style="display: flex;  position: relative;">
                            <div class="floor_details_left">
                                <div class="floor_child">
                                    <!-- <div class="floor_child-header">
                                        <img :src="item.before_icon" alt="">
                                    </div> -->
                                    <div class="floor_child_details">
                                        <span v-for="(child,ix) in item.children" @click="getStores(item,child.id)" v-if="ix<5">@{{child.name}}</span>
                                        <span @click="window.location.href = '{{ route('home.store.storeList') }}?cid='+item.id" v-if="item.children?item.children.length>5:false">查看全部 &nbsp;<img src="{{URL::asset('./img/index/floor_more.png')}}"></span>
                                    </div>
                                    <div class="floor_child_adver">
                                        <img v-if="item.adv[0]" :src="item.adv[0]?item.adv[0].thumb:''" alt="无宣传图">
                                    </div>
                                </div>
                            </div>

                            <div class="floor_details_right" :class="{ vertical_details:index==2||index==5||index==8}">
                                <div class="floor_right_details " @click="window.location.href = '{{ route('home.store.store') }}?id='+store.id" v-for="store in item.store">
                                    <div class="right_img">
                                        <img :src="store.logo" alt="">
                                    </div>
                                    <div class="right_details">
                                        <p class="right_company"><span>@{{store.store_name}}</span><img v-if="store.quality==2" src="{{URL::asset('./img/index/floor_jing.png')}}" /><img v-if="store.hot==2" src="{{URL::asset('./img/index/floor_hot.png')}}" /></p>
                                        <p class="right_mess">
                                            <a><img src="{{URL::asset('./img/index/floor_tel.png')}}" alt=""><span>@{{store.call}}</span></a>
                                            <a><img src="{{URL::asset('./img/index/floor_look.png')}}" alt=""><span>@{{store.view}}</span></a>
                                            <a><img src="{{URL::asset('./img/index/floor_praise.png')}}" alt=""><span>@{{store.praise}}</span></a>
                                        </p>
                                        <p class="right_scope">@{{store.service_scope}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Advi_img" v-if="item.adv_center">
                            <img :src="item.adv_center.thumb" alt="">
                        </div>
                    </div>
                </div>
                <div class="active_floor">
                    <div class="active_Logo">
                        <img src="{{URL::asset('./img/index/logo.png')}}">
                    </div>
                    <div :class="{active:activeId==`fllo_${index}`}" @click="clickActive('fllo_'+index)" v-for="(item,index) in climbs" :class="'fllo_'+index">@{{item.name}}</div>
                </div>

            </div>
            <div class="advi_swiper">
                <div class="advi_swiper_left">
                    <div v-for="item in advsContent"><img :src="item.thumb" alt=""></div>
                </div>
                <div class="advi_swiper_right">
                    <div>
                        <el-carousel :interval="4000" type="card" arrow="always" height="200px" indicator-position="none">
                            <el-carousel-item v-for="item in hotstore" :key="item">
                                <a :href="item.website"><img :src="item.logo" alt="" style="width:100%;height:100%"></a>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>
            <div class="condition">
                <div>
                    <img src="{{URL::asset('./img/index/condition_1.png')}}" alt="">
                    <span>
                        <span class="condition_title"><span>供应商 </span><a>@{{numbers.store}}</a></span>
                        <span class="condition_content" title="数千家供应商供您挑选，为您提供专业
                            的服务，1对1电话询问更快促成合作">数千家供应商供您挑选，为您提供专业
                            的服务，1对1电话询问更快促成合作</span>
                    </span>
                </div>
                <div>
                    <img src="{{URL::asset('./img/index/condition_2.png')}}" alt="">
                    <span>
                        <span class="condition_title"><span>用户数</span> <a style="color:#F49423">@{{numbers.user}}</a></span>
                        <span class="condition_content" title="高端企业人士云集于此，寻求适合所在
                            公司的最佳解决方案">高端企业人士云集于此，寻求适合所在
                            公司的最佳解决方案</span>
                    </span>
                </div>
                <div>
                    <img src="{{URL::asset('./img/index/condition_3.png')}}" alt="">
                    <span>
                        <span class="condition_title"><span>活动/会议活动/会议</span> <a>@{{numbers.act}}</a></span>
                        <span class="condition_content" title="多个行业之间的人士交流、合作、会展
                            实时更新，欢迎您的发布、关注与参与">多个行业之间的人士交流、合作、会展
                            实时更新，欢迎您的发布、关注与参与</span>
                    </span>
                </div>
                <div>
                    <img src="{{URL::asset('./img/index/condition_4.png')}}" alt="">
                    <span>
                        <span class="condition_title"><span>需求市场</span> <a style="color:#F49423">@{{numbers.demand}}</a></span>
                        <span class="condition_content" title="成百上千条家需求信息市场等待优质服
                            务供应商的解决方案，不容错过的商机">成百上千条家需求信息市场等待优质服
                            务供应商的解决方案，不容错过的商机</span>
                    </span>
                </div>
            </div>
            <div class="foo_advi" v-if="advsBottom[0]" :style="{backgroundImage:'url('+advsBottom[0].thumb+')'}">
                <span>说出你的<a>建议，</a></span>
                <span>持续<a style="color:#F28B3C">好礼相送！</a></span>
                <span class="foo_cont">
                    无论是表扬、批评还是吐槽
                    <p>只要是你给的，我们都接受</p>
                </span>
                <button @click="clickMo">我要点评</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    let app = new Vue({
        el: '#app',
        data: function() {
            return {
                listData: [],
                pageData: null,
                hasData: true, //加载更多开关
                noData: false, //没有数据开关
                loading: false, //加载loading开关
                params: {
                    page: 1,
                    cateid: 0,
                    catepid: 0,
                    position: 1
                },
                tabData: [],
                activeId: "fllo_0",
                swiperData: [],
                listMenu: [],
                listMenuTitle: "",
                listMenuChild: [],
                listMenuChildStore: [],
                hotTitle: "热销商品",
                hotact: [],
                hotgoods: [],
                transaction: [],
                climbs: [],
                stores: [],
                advsTop: [],
                advsBottom: [],
                advsContent: [],
                hotstore: [],
                numbers: [],
            }
        },
        created() {
            this.list();
            this.getlistMenu();
        },
        mounted() {

        },
        methods: {
            clickMo() {
                if (sessionStorage.getItem("HRuserDetails")) {
                    if (JSON.parse(sessionStorage.getItem("HRuserDetails")).type == 2) {
                        window.location.href = "{{ route('home.suppliermy.supplierFeedBack') }}";
                    } else if (JSON.parse(sessionStorage.getItem("HRuserDetails")).type == 2) {
                        window.location.href = "{{ route('home.hrmy.hrFeedBack') }}";
                    }
                } else {
                    this.$message({
                        message: "请先登录！",
                        type: 'warning'
                    });
                }
            },
            getlistMenu() {
                $.get("{{ route('home.index.climbs') }}", (res) => {
                    this.climbs = res.data || [];
                    this.stores = [];
                    setTimeout(() => {
                        this.getTop();

                        $(document).ready(() => {
                            $(document).scroll(() => {
                                this.getTop();
                            });
                        });
                    }, 0);

                });
                $.get("{{ route('home.public.advs') }}", {
                    adsense_id: 6
                }, (res) => {
                    this.advsContent = res.data || []
                });
                $.get("{{ route('home.public.advs') }}", {
                    adsense_id: 5
                }, (res) => {
                    this.advsBottom = res.data || []
                });
                $.get("{{ route('home.index.categorys') }}", (res) => {
                    this.listMenu = res.data || []
                });
                $.get("{{ route('home.index.banner') }}", (res) => {
                    this.swiperData = res.data || []
                    $('.carousel').carousel('cycle')

                });

                $.get("{{ route('home.index.hotact') }}", (res) => {
                    this.hotact = res.data || []
                });
                $.get("{{ route('home.index.hotstore') }}", (res) => {
                    this.hotstore = res.data || []
                });
                $.get("{{ route('home.index.numbers') }}", (res) => {
                    this.numbers = res.data || []
                });

                this.hot("热销商品")
            },
            getTop() {
                let topHeight = $(document).scrollTop();
                let clientWidth = document.body.clientWidth;
                let astrictHeight = 650;

                if (document.body.offsetHeight - topHeight < 1200) {
                    $(".active_floor").hide("fast")
                } else {
                    if (topHeight > astrictHeight) {
                        $(".active_floor").slideDown("fast", () => {
                            $(".active_floor").css("display", "grid")
                            $(".active_floor").css("overflow", "inherit");
                        })
                    } else {
                        $(".active_floor").hide("fast")
                    }
                }
                this.climbs.forEach((element, index) => {
                    let offsetTop = $(`#fllo_${index}`).offset().top;
                    if (topHeight >= offsetTop - 120) {
                        this.activeId = `fllo_${index}`;
                    }
                });
            },
            getStores(item, id) {
                $.get("{{ route('home.index.stores') }}", {
                    "cid": id
                }, (res) => {
                    item.store = res.data || [];
                });
            },
            clickActive(classId) {
                this.activeId = classId;
                let offsetTop = $(`#${classId}`).offset().top;
                $('html,body').animate({
                    scrollTop: offsetTop - 20 + 'px'
                }, 1000);
            },

            list() {
                let that = this;
                this.hasData = false;
                this.loading = true;
                // $.get("{{ route('home.public.navbars') }}", function(res) {
                //     that.tabData = res.data;
                // })
            },
            info(id) {
                window.location.href = "" + '?id=' + id;
            },
            paginate() {
                this.hasData = false;
                this.list();
            },
            hot(data) {
                this.hotTitle = data;
                if (data == "热销商品") {
                    $.get("{{ route('home.index.hotgoods') }}", (res) => {
                        this.hotgoods = res.data || []
                    });
                } else {
                    $.get("{{ route('home.index.transaction') }}", (res) => {
                        this.transaction = res.data || []
                    });
                }
            },
            childDetail(item) {
                this.listMenuTitle = item;
                this.listMenuChild = item.children
                this.listMenuChildStore = item.store
                $(".listMenu_child").show();
                $(".listMenu_child").css("display", 'flex')
            },
            hideDetail() {
                $(".listMenu_child").hide();
            },
            swiperFooterClose() {
                $(".swiperAni_footer").fadeOut();
            },
        }
    });
</script>
@endsection